import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

const Projects = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  
  // Project data
  const projects = [
    {
      name: '个人博客系统',
      description: '一个基于Vue.js和Nuxt.js构建的静态博客网站，实现了文章发布、标签分类、Markdown实时渲染和响应式布局。通过这个项目，我深入学习了服务端渲染（SSR）和SEO优化技术。',
      technologies: ['Vue.js', 'Nuxt.js', 'Markdown', 'SSR', 'SEO'],
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Personal%20blog%20website%20screenshot%2C%20modern%20UI%2C%20dark%20theme&sign=4f78297f19083c9d75fe1480221c9eca'
    }
  ];
  
  return (
    <motion.section
      id="projects"
      ref={ref}
      initial={{ opacity: 0, x: 50 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
      className="bg-color-card rounded-xl p-6 shadow-lg backdrop-blur-sm border border-gray-800"
    >
      <div className="flex items-center mb-6">
        <div className="w-10 h-10 rounded-full bg-color-accent flex items-center justify-center mr-4 star-glow">
          <i className="fa-solid fa-project-diagram text-white"></i>
        </div>
        <h2 className="text-2xl font-bold text-gray-100">个人项目</h2>
      </div>
      
      <div className="border-t border-gray-700 pt-6">
        {projects.map((project, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: index * 0.2 }}
            className="mb-8 last:mb-0"
          >
            <h3 className="text-xl font-semibold text-gray-100 mb-4">{project.name}</h3>
            
            {/* Project Image */}
            <div className="relative rounded-lg overflow-hidden mb-4 star-glow-hover transition-all duration-500 group">
              <img 
                src={project.imageUrl} 
                alt={project.name}
                className="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                <div className="p-4 w-full">
                  <div className="flex justify-center space-x-2">
                    <a href="#" className="px-4 py-2 bg-color-accent rounded-md text-white text-sm hover:bg-opacity-80 transition-colors">
                      <i className="fa-solid fa-link mr-1"></i> 查看项目
                    </a>
                    <a href="#" className="px-4 py-2 bg-gray-800 rounded-md text-white text-sm hover:bg-gray-700 transition-colors">
                      <i className="fa-brands fa-github mr-1"></i> GitHub
                    </a>
                  </div>
                </div>
              </div>
            </div>
            
            {/* Project Description */}
            <p className="text-gray-300 mb-4">{project.description}</p>
            
            {/* Technologies */}
            <div className="flex flex-wrap gap-2">
              {project.technologies.map((tech, i) => (
                <span 
                  key={i} 
                  className="px-3 py-1 bg-color-card-light text-gray-200 text-sm rounded-full"
                >
                  {tech}
                </span>
              ))}
            </div>
          </motion.div>
        ))}
      </div>
    </motion.section>
  );
};

export default Projects;